<template>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  :append-to-body="true"
	  width="450px"
	  class="editor-dialog"
	  draggable
	  :close-on-click-modal="false"
	>
 		<div  v-for=" field in props.feilds" >
			<Vector2DField v-if="field.dataType.type=='v2' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<EnumField v-if="field.dataType.type=='enum' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<ImgField v-if="field.dataType.type=='img' && field.display==true " :baseUrl="baseUrl"  :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<Vector4DField v-if="field.dataType.type=='v4' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<BooleanField v-if="field.dataType.type=='boolean' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :options="field.dataType.specs" :value="field.dataType.value" :required="field.required"  @onchange="onchange"  />
			<ColorField v-if="field.dataType.type=='color' && field.display==true " :pidentifier="pidentifier"  :identifier="field.identifier" :label="field.name" :value="field.dataType.value" :required="field.required" @onchange="onchange" />
			<StringField v-if="field.dataType.type=='string' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :length="field.dataType.specs.length" :value="field.dataType.value" :required="field.required" :readonly="field.readonly" @onchange="onchange" />
			<NumberField v-if="field.dataType.type=='float' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<NumberField v-if="field.dataType.type=='int' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<NumberField v-if="field.dataType.type=='double' && field.display==true " :pidentifier="pidentifier" :identifier="field.identifier" :label="field.name" :min="field.dataType.specs.min" :max="field.dataType.specs.max" :step="field.dataType.specs.step" :value="field.dataType.value" :required="field.required" @onchange="onchange"/>
			<StructField v-if="field.dataType.type=='struct' && field.display==true" :pidentifier="pidentifier+'.'+field.identifier" :list="field.dataType.specs" :name="field.name"  @onchange="onchange"/>
		</div> 
		<template #footer>
		  <div class="dialog-footer">
			<el-button color="#7456E9" @click="submitForm"  :loading="loading">确 定</el-button>
			<el-button color="#1e1e1e"  @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	
	
	import EnumField from "@/components/FormField/EnumField.vue";
	import ImgField from "@/components/FormField/ImgField.vue";
	import Vector2DField from "@/components/FormField/Vector2DField.vue";
	import Vector4DField from "@/components/FormField/Vector4DField.vue";
	import BooleanField from "@/components/FormField/BooleanField.vue";
	import ColorField from "@/components/FormField/ColorField.vue";
	import StringField from "@/components/FormField/StringField.vue";
	import NumberField from "@/components/FormField/NumberField.vue";
	import StructField from "@/components/FormField/StructField.vue";
	
	const props = defineProps({
		feilds: {
			type: Object,
			default: () => {}
		},
	})
	
 	const loading = ref(false); 
	const dialog = ref({
		visible:false,
		title:'',
	});
	const baseUrl=ref<string>('');
	const name=ref<string>('');
	const pidentifier=ref<string>('');
	async function openDialog(feilds?:any,row?: any, type?: string) {
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
		}
	}
	
	const onchange=()=>{
		
	}
	
	const submitForm=()=>{
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',{})
	}
	
	defineExpose({
	  openDialog,closeDialog
	});
	
</script>

<style scoped>
	
	:deep(.el-input) {
	    --el-input-text-color: #ccc;
	    --el-input-border: #105ae4;
	    --el-input-hover-border: #3fa3ff!important;
	    --el-input-focus-border: #3fa3ff!important;
	    --el-input-transparent-border: 0 0 0 1px transparent inset;
	    --el-input-border-color: transparent;
	    --el-input-border-radius: 5px;
	    --el-input-bg-color: #1b1b1b;
	    --el-input-icon-color: var(--el-text-color-placeholder);
	    --el-input-placeholder-color: var(--el-text-color-placeholder);
	    --el-input-hover-border-color: transparent;
	    --el-input-clear-hover-color: var(--el-text-color-secondary);
	    --el-input-focus-border-color: transparent;
	}
	:deep(.el-input-number .el-input__inner){
		text-align: left;
	}
	:deep(.el-input__wrapper){
		border-radius:0px;
	}
	:deep(.el-tree){
		width: 100%;
	}
	:deep(.el-tree-node__label){
		color: #fff;
	}
	
	
	.custom-dialog{
		background-color: rebeccapurple;
	}
	
	:deep(.avatar-uploader .el-upload) {
	  border: 1px dashed #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 16rem;
	  height: 10rem;
	  
	}

	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
	
	.thumbnail{
		height: 160px !important;
		width: 256px !important;
		-o-object-fit: fill;
		object-fit: fill;
	}
	
	.form-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-right: 0.625rem;;
	}
	
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
</style>